<template>
  <el-container style="height: 100%">
    <el-header height="40px">
      <el-select v-model="location_id" clearable placeholder="库位" @change="filter">
        <el-option v-for="item in all_location" :key="item.barcode" :label="item.code" :value="item.barcode"> </el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-select v-model="material_id" clearable placeholder="物料" @change="filter">
        <el-option v-for="item in all_material" :key="item.code" :label="item.name" :value="item.code"> </el-option>
      </el-select>
    </el-header>
    <el-main>
      <el-table :data="tableData" stripe style="width: 100%" height="100%">
        <el-table-column
          v-for="column in pd_location_storage_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, pd_location_storage_define)
            }
          "
        />
      </el-table>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import type { bd_location, bd_material } from '@/types/basedata'
import { ref, onMounted } from 'vue'
import { fill_ref_info, cell_formatter } from '@/utils/common'
import { pd_location_storage_define } from '@/meta'
import type { pd_location_storage, pd_qrcode } from '@/types/producedata'
import { groupQrCode } from '@/utils/groupUtils'
import { useDbStore } from '@/stores/modules/database'
const dbStore = useDbStore()
const tableData = ref<pd_location_storage[]>([])
const all_qrcode = ref<pd_qrcode[]>([])
const all_location = ref<bd_location[]>([])
const all_material = ref<bd_material[]>([])
const location_id = ref<string>()
const material_id = ref<string>()
all_location.value = dbStore.location
all_material.value = dbStore.material
const filter = () => {
  tableData.value = groupQrCode(
    all_qrcode.value.filter(
      (r) =>
        r.location &&
        ((typeof r.location === 'string' ? r.location : r.location.barcode) === location_id.value || !location_id.value) &&
        ((typeof r.material === 'string' ? r.material : r.material.code) === material_id.value || !material_id.value)
    )
  )
}
onMounted(() => {
  const tmp = dbStore.qrcode
  fill_ref_info(tmp, pd_location_storage_define)
    .then(() => {
      all_qrcode.value = tmp
      filter()
    })
    .catch(() => {
      console.log('err')
    })
})
</script>
